<template>
  <div
    class="battle-block-skin-list"
    ref="skinListRef"
    :style="{ top: styleTop + 'px' }"
    :class="{ animation }"
  >
    <div
      v-for="(skin, i) in skinList"
      class="skin-item"
      :class="{ 'is-show': i === skinList.length - offset && !opening }"
    >
      <div class="img-box">
        <img :src="skinTemplate" />
        <img :src="skin.image_url" />
      </div>

      <div class="skin-name text-overflow">{{ skin.item_name }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { SkinItem } from "@/types";
import { defineComponent, nextTick, PropType, reactive, toRefs } from "vue";
import skinTemplate from "@/static/img/battle/skin-template.png";

export default defineComponent({
  setup() {
    const state = reactive({
      skinListRef: void 0 as any,
      styleTop: 0,
      animation: true,
      opening: true,
      offset: 2,
    });

    const getAnimationDuration = () => {
      const transition = getComputedStyle(state.skinListRef).transition || "";
      const [name, time] = transition.split(" ");
      const duration = parseFloat(time || "") * 1000;
      return duration || 5000;
    };

    return {
      skinTemplate,
      ...toRefs(state),

      scroll: (parentHeight: number, offset: number): Promise<void> => {
        return new Promise((resolve, reject) => {
          state.styleTop = 0;
          state.offset = offset;
          state.opening = true;

          nextTick(() => {
            state.animation = true;
            const elements = state.skinListRef.querySelectorAll(".skin-item");
            const element = elements[elements.length - offset];

            state.styleTop = -(
              element.offsetTop -
              parentHeight / 2 +
              element.clientHeight / 2
            );

            const animationDuration = getAnimationDuration();

            const callback = () => {
              if (!state.animation) return;

              state.animation = false;
              state.opening = false;
              resolve();
            };

            state.skinListRef.ontransitionend = (e: any) => {
              if (e.propertyName !== "top") return;
              callback();
            };

            setTimeout(callback, animationDuration);
          });
        });
      },
    };
  },

  props: {
    skinList: {
      type: Array as PropType<SkinItem[]>,
      default: () => [],
    },
  },
});
</script>

<style lang="scss">
.battle-block-skin-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  text-align: center;

  &.animation {
    transition: top 5s cubic-bezier(0, 0, 0.01, 1);
    // transition: top 5.1s cubic-bezier(0.4, 0.1, 0.25, 1);
  }

  > div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 0;

    &.skin-item {
      &.is-show {
        .skin-name {
          opacity: 1;
        }
      }
    }

    .img-box {
      width: 30%;
      position: relative;
      max-width: 100px;

      img:first-child {
        width: 100%;
        opacity: 0;
      }

      img:last-child {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    .skin-name {
      width: 96%;
      opacity: 0;
      transition: opacity 0.3s linear;
      text-align: center;
    }
  }
}
</style>
